<template>
  <el-container class="manage-container">
    <el-header class="manage-header">
      <div class="header-title">物资编码识别</div>
      <div style="position: fixed; right: 20px">
        <span>root</span>
      </div>
    </el-header>

    <el-container class="manage-container">
      <el-aside width="200px">
        <el-menu
          :default-active="defaultActive"
          class="el-menu-vertical-demo"
          background-color="#26384d"
          text-color="#ffffff"
          router
        >
          <el-menu-item index="fileManage">
            <i class="el-icon-upload2"></i>
            <span slot="title">文件上传（新）</span>
          </el-menu-item>
          <el-menu-item index="fileUpload">
            <i class="el-icon-upload"></i>
            <span slot="title">文件上传</span>
          </el-menu-item>
          <el-menu-item index="fileQuery">
            <i class="el-icon-search"></i>
            <span slot="title">文件查询</span>
          </el-menu-item>
          <el-menu-item index="totalResult">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">查看总表</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main style="background-color: #f6f6f6">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
        <file-upload v-show="$route.path == '/manage/fileUpload'"></file-upload>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import FileUpload from "./fileUpload.vue";
export default {
  components: {
    FileUpload,
  },
  computed: {
    defaultActive: function () {
      return this.$route.name;
    },
  },
};
</script>

<style lang="less">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
  min-height: 400px;
}
.manage-container {
  height: -webkit-calc(100vh - 60px);
  height: -moz-calc(100vh - 60px);
  height: calc(100vh - 60px);
}
.manage-header {
  display: flex;
  align-items: center;
  background-color: #347bba;
  color: white;
  .header-title {
    font-size: 22px;
    margin-left: 30px;
    font-weight: bolder;
    // color: #9be2ec;
  }
}
</style>
